<template>
    <div>
        <div class="main-tile">小区申请记录 ( {{$utils.getCurrentTime()}} )</div>
        <Tabs type="card">
            <TabPane label="待审核">
                <Table border height="184" :columns="villageColumns" :data="villageDataCurrnData">
                    <template slot-scope="{ row, index }" slot="action">
                        <Button type="primary" size="small" @click="examine(row,index)">审核</Button>
                    </template>
                </Table>
                <Page @on-change="changePage" :total="villageData.length" :page-size="3" show-total class="text-center page-top"/>
            </TabPane>
            <TabPane label="已审核">
                <Table border height="184" :columns="villageColumns2" :data="villageDataCurrnData2">
                    <template slot-scope="{ row, index }" slot="memo">
                        <span>{{row.memo==(null || "")?'已通过':'未通过'}}</span>
                    </template>
                </Table>
                <Page @on-change="changePage2" :total="villageData2.length" :page-size="3" show-total class="text-center page-top"/>
            </TabPane>
        </Tabs>
        <!--<div class="main-tile">人员统计 ( {{$utils.getCurrentTime()}} )</div>-->
        <!--<Row class="num-content">-->
            <!--<Col span="4">-->
                <!--<Card>-->
                    <!--<p class="text-center">用户注册总量：1000</p>-->
                <!--</Card>-->
            <!--</Col>-->
            <!--<Col span="1">-->
                <!--<p>&nbsp;</p>-->
            <!--</Col>-->
            <!--<Col span="4">-->
            <!--<Card>-->
                <!--<p class="text-center">新增注册用户量：1000</p>-->
            <!--</Card>-->
            <!--</Col>-->
            <!--<Col span="1">&nbsp;</Col>-->
            <!--<Col span="4">-->
            <!--<Card>-->
                <!--<p class="text-center">拜访量：1000</p>-->
            <!--</Card>-->
            <!--</Col>-->
            <!--<Col span="1">-->
            <!--<p>&nbsp;</p>-->
            <!--</Col>-->
            <!--<Col span="4">-->
            <!--<Card>-->
                <!--<p class="text-center">出小区总人数：1000</p>-->
            <!--</Card>-->
            <!--</Col>-->
            <!--<Col span="1">-->
            <!--<p>&nbsp;</p>-->
            <!--</Col>-->
            <!--<Col span="4">-->
            <!--<Card>-->
                <!--<p class="text-center">进入小区总人数：1000</p>-->
            <!--</Card>-->
            <!--</Col>-->
        <!--</Row>-->
        <!--<div class="main-tile">小区统计 ( {{$utils.getCurrentTime()}} )</div>-->
        <!--<Row class="num-content">-->
            <!--<Col span="4">-->
            <!--<Card>-->
                <!--<p class="text-center">小区注册总量：1000</p>-->
            <!--</Card>-->
            <!--</Col>-->
            <!--<Col span="1">-->
            <!--<p>&nbsp;</p>-->
            <!--</Col>-->
            <!--<Col span="4">-->
            <!--<Card>-->
                <!--<p class="text-center">新增注册小区量：1000</p>-->
            <!--</Card>-->
            <!--</Col>-->
            <!--<Col span="1">&nbsp;</Col>-->
            <!--<Col span="4">-->
            <!--<Card>-->
                <!--<p class="text-center">人流量最高：香楠小区</p>-->
            <!--</Card>-->
            <!--</Col>-->
            <!--<Col span="1">-->
            <!--<p>&nbsp;</p>-->
            <!--</Col>-->
            <!--<Col span="4">-->
            <!--<Card>-->
                <!--<p class="text-center">异常量最高：香北小区</p>-->
            <!--</Card>-->
            <!--</Col>-->
            <!--<Col span="1">-->
            <!--<p>&nbsp;</p>-->
            <!--</Col>-->
            <!--<Col span="4">-->
            <!--<Card>-->
                <!--<p class="text-center">隔离量最高：香西小区</p>-->
            <!--</Card>-->
            <!--</Col>-->
        <!--</Row>-->
        <Modal fullscreen v-model="showVillageExamine" title="小区审核">
            <div slot="header" class="villageDetailTitle">
                小区审核
            </div>
            <div class="main-tile">小区信息</div>
            <Row class="main-content">
                <Col span="8">
                小区名称：{{currnVillageInfo.name}}
                </Col>
                <Col span="8">
                小区地址：{{currnVillageInfo.address}}
                </Col>
                <Col span="8">
                申请时间：{{currnVillageInfo.statusTime}}
                </Col>
            </Row>
            <div class="main-tile">负责人信息</div>
            <Row class="main-content">
                <Col span="8">
                管理员姓名：{{currnVillageInfo.managerName}}
                </Col>
                <Col span="8">
                管理员电话：{{currnVillageInfo.managerPhone}}
                </Col>
                <Col span="8">
                物业电话：{{currnVillageInfo.phoneNumber}}
                </Col>
            </Row>
            <div class="main-tile">
                审核信息
            </div>
            <Row class="main-content">
                <span class="important-span">是否通过</span>
                <RadioGroup v-model="isPass" class="pass-radio-group">
                    <Radio label="Pass">
                        <span>通过</span>
                    </Radio>
                    <Radio label="noPass">
                        <span>不通过</span>
                    </Radio>
                </RadioGroup>
            </Row>
            <Row class="main-content" v-if="isPass=='noPass'">
                <div>
                    <span class="important-span">不通过原因：</span>
                </div>
                <div>
                    <Input v-model="noPassReason" type="textarea" :autosize="{minRows: 5,maxRows: 5}" placeholder="审核不通过必须填写原因"/>
                </div>
            </Row>
            <div slot="footer" class="text-center">
                <Button type="primary" @click="communityAudit">审核</Button>
                <Button type="default" @click="showVillageExamine=false">取消</Button>
            </div>
        </Modal>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                villageColumns: [
                    {
                        title: '小区名称',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '小区地址',
                        key: 'address',
                        align: 'center',
                    },
                    {
                        title: '物业电话',
                        key: 'phoneNumber',
                        align: 'center',
                    },
                    {
                        title: '管理员名称',
                        key: 'managerName',
                        align: 'center',
                    },
                    {
                        title: '管理员电话',
                        key: 'managerPhone',
                        align: 'center',
                    },
                    {
                        title: '申请时间',
                        key: 'statusTime',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center',
                    },
                ],
                villageColumns2: [
                    {
                        title: '小区名称',
                        key: 'name',
                        align: 'center',
                    },
                    {
                        title: '小区地址',
                        key: 'address',
                        align: 'center',
                    },
                    {
                        title: '物业电话',
                        key: 'phoneNumber',
                        align: 'center',
                    },
                    {
                        title: '管理员名称',
                        key: 'managerName',
                        align: 'center',
                    },
                    {
                        title: '管理员电话',
                        key: 'managerPhone',
                        align: 'center',
                    },
                    {
                        title: '申请时间',
                        key: 'statusTime',
                        align: 'center',
                    },
                    {
                        title: '审核状态',
                        slot: 'memo',
                        align: 'center',
                    },
                    {
                        title: '不通过原因',
                        key: 'memo',
                        align: 'center',
                    },
                ],
                villageData: [],
                villageData2: [],
                villageDataCurrnData:[],
                villageDataCurrnData2:[],
                showVillageExamine:false,
                isPass:'Pass',
                noPassReason:'',
                currnVillageInfo:{},
            }
        },
        mounted(){
            this.getExamineData('N')
            this.getExamineData('Y')
        },
        methods: {
            //审核小区
            examine(item,index){
                this.currnVillageInfo=item
                console.log(this.currnVillageInfo)
                this.showVillageExamine=true
            },
            //提交审核信息
            communityAudit(){
                if(this.isPass=='noPass' && this.noPassReason==''){
                    this.$Message.warning('审核不通过必须填写不通过原因')
                    return false
                }
                this.$axios.post(this.$api.communityAudit,{
                    communityId: this.currnVillageInfo.communityId,
                    reviewInfo: this.noPassReason,
                })
                    .then(success=>{
                        console.log(success)
                        if(success.data.code=='200'){
                            this.$Message.success(success.data.msg)
                            this.showVillageExamine=false
                            this.getExamineData('N')
                            this.getExamineData('Y')
                        }else{
                            this.$Message.error(success.data.msg)
                        }
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            },
            //获取小区审核数据
            getExamineData(type){
                this.$axios.post(this.$api.queryCommunity,
                    {
                        "reviewStatus": type,
                    })
                    .then(success=>{
                        if(type=='N'){
                            this.villageData=success.data.data
                            this.changePage(1)
                        }
                        if(type=='Y'){
                            this.villageData2=success.data.data
                            this.changePage2(1)
                        }
                    })
                    .catch(error=>{
                        console.log(error.data)
                    })
            },
            //获取当前页审核数据
            getCurrnExamineData(data,pageNum){
                return this.$utils.sliceArray(data,3)[pageNum-1]
            },
            //改变页数(待审核)
            changePage(num){
                this.villageDataCurrnData=this.getCurrnExamineData(this.villageData,num)
            },
            //改变页数(已审核)
            changePage2(num){
                this.villageDataCurrnData2=this.getCurrnExamineData(this.villageData2,num)
            },
        }
    }
</script>
<style scoped lang="scss">
    .num-content{
        padding: 0 10px;
    }
    .page-top{
        margin-top: 10px;
    }
    .important-span:before{
        content: '*';
        color: red;
    }
    .pass-radio-group{
        margin-left: 10px;
    }
</style>